<template>
  <div class=''>
    <div class="homecontainer">
      <div class="homecontainer-top">
        <div class="leftdiv">
          <div class="leftone">
            <titleborder title="ETC门架">
              <leftone />
            </titleborder>
          </div>
          <div class="lefttwo">
            <titleborder title="告警列表">
              <lefttwo />
            </titleborder>
          </div>
          <div class="leftthree">
            <titleborder title="机柜状态">
              <leftthree />
            </titleborder>
          </div>
        </div>
        <div class="maindiv">
          <div class="mainTop">
            <normalborder>
              <mainmap />
            </normalborder>
          </div>
          <div class="mainBottom">
            <titleborder title="收费广场">
              <tollStation />
            </titleborder>
          </div>
        </div>
        <div class="rightdiv">
            <titleborder title="机房数据">
              <computerRoom/>
            </titleborder>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import leftone from "./leftone";
  import lefttwo from "./lefttwo";
  import leftthree from "./leftthree";
  import tollStation from "./tollStation/index";
  import computerRoom from "./computerRoom/index";
  import mainmap from "./mainmap";

  import titleborder from "../title-border.vue";
  import normalborder from "../normalborder.vue";
    export default {
        name: "index",
        components: {
        titleborder,
        normalborder,
        leftone,
        lefttwo,
        leftthree,
        mainmap,
        tollStation,
        computerRoom
      },
    }
</script>

<style lang='scss' scoped>
  .homecontainer {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    .homecontainer-top {
      flex: 10;
      display: flex;
      flex-direction: row;
      .leftdiv {
        flex: 2;
        display: flex;
        flex-direction: column;
        padding: 0px 0px 10px 45px;
        .leftone {
          padding-top: 10px;
          flex: 4;

        }
        .lefttwo {
          padding-top: 10px;
          flex: 6;
        }
        .leftthree {
          padding-top: 10px;
          flex: 6;

        }
      }
      .maindiv {
        flex: 4;
        padding: 20px 10px 10px 10px;
        display: flex;
        flex-direction: column;
        .mainTop{
          flex: 10;
        }
        .mainBottom{
          padding-top: 10px;
          flex: 6;
        }
        // padding: 50px;
      }
      .rightdiv {
        flex: 2;
        padding: 0px 45px 10px 0px;
      }
    }
  }
</style>
